<template>
	<section>
		<div class="add-address-contain pb100rem">
			<ul class="bg-white fs28rem">
				<li class="pt30rem pb30rem pl30rem pr30rem border-b layout flex-left">
					<label>收货人</label>
					<input type="text" placeholder="请填写" v-model="form.contacts">
				</li>
				<li class="pt30rem pb30rem pl30rem pr30rem border-b layout flex-left">
					<label>手机号码</label>
					<input type="text" placeholder="请填写" v-model="form.mobile">
				</li>
				<li class="pt30rem pb30rem pl30rem pr30rem border-b layout flex-left" 
					@click="popupVisible = true"
				>
					<label>所在地区</label>
					<input type="text" placeholder="请选择" v-model='address_info' disabled>
					<i class="iconfont icon-right2 fs20rem color999"></i>
				</li>
				<li class="pt30rem pb30rem pl30rem pr30rem border-b layout flex-left start">
					<label>详细地址</label>
					<textarea rows="10" placeholder="请填写" v-model="form.address"></textarea>
				</li>
			</ul>
			<div class="pl30rem pr30rem">
				<button @click="submit" class="sure-add-btn white radius fs32rem pt20rem pb20rem cxo-red" :class="{ bottom5 : showApp }">	
					确认
				</button>
			</div>
			<popup v-model="popupVisible" position="bottom">
				<div Slot="showToolbar" class="layout pt20rem pb20rem pl30rem pr30rem">
					<p class="fs30rem" @click="popupVisible = false">取消</p>
					<p class="fs30rem" @click="popupVisible = false">确认</p>
				</div>
			 	<picker :slots="slots" @change="onValuesChange" value-key="name"></picker>
			</popup>
		</div>
	</section>
</template>

<script>
	import { Popup, Picker } from 'mint-ui';
	import $toast   		 from '@/utils/toast';	
	import { addAddress,setAddressforRedis  } from "@/api/address";
	
	export default{
	    components:{
	        Popup,
	        Picker
		},
		data()
		{
		    return{
		    	form:
		    	{
		    		uid 	   : localStorage.getItem('uid'),
		    		contacts   : '',
		    		mobile 	   : null,
		    		province_id: 2822,
		    		city_id    : 2937,
		    		distrct_id : 2938,		    		
		    		address    : '',
		    		id 		   : 0,
		    	},
		    	name    : '',
		    	info_list: [],
		    	size: 0,
		    	address_info: '广东东莞东城街道',
		    	popupVisible: false,
		    	type : this.$route.query.type,
		    	showApp : window.sessionStorage.getItem('isapp'),
		    	slots: [
				        {
				          flex: 1,
				          values: [],
				          textAlign: 'center'
				        },
				        {
				          divider: true,
				          content: '-',
				          className: 'slot2'
				        },
				        {
				          flex: 1,
				          values: [],
				          textAlign: 'center'
				        },
				        {
				          divider: true,
				          content: '-',
				        },
				        {
				          flex: 1,
				          values: [],
				          textAlign: 'center'
				        }
				    ]
            }
		},
		methods:
		{
			onValuesChange(picker, values)
			{
		        //阻止多次加载
		        if( this.size <= 3){
		        	return this.size ++;
		        }
		        picker.setSlotValues(1, values[0].children);
		        picker.setSlotValues(2, values[1].children);
		        if(values[2]){
			        this.address_info = `${values[0].name}${values[1].name}${values[2].name}`;
			        this.form.province_id  = values[0].id;
			        this.form.city_id 	   = values[1].id;
			        this.form.distrct_id   = values[2].id;
		        }
		        else
		        {
		        	this.address_info = `${values[0].name}${values[1].name}`;
			        this.form.province_id  = values[0].id;
			        this.form.city_id 	   = values[1].id;
			        this.form.distrct_id   = -1;
		        }
		        this.popupVisible = false;
		    },
		    submit()
		    {   
		    	addAddress(this.form).then( res => {
		    		// $toast("地址确认成功");
		    		// this.$router.replace("/member/address");	
		    		this.$router.go(-1);
		    	});
		    }
		},
		created(){
			//编辑页面 key = 1
			if(this.$route.query.key){
				var addressList       = this.$store.state.address;
				this.form.mobile      = addressList.moblie
				this.form.contacts    = addressList.username;
				this.address_info  	  = addressList.pcd_address;
				this.form.province_id = addressList.province_id;
				this.form.city_id     = addressList.city_id;
				this.form.distrct_id  = addressList.district_id;
				this.form.address     = addressList.address;
				this.form.id          = addressList.id;
			}
			setAddressforRedis().then( res=> {
				this.slots[0].values = res.data;
				this.slots[2].values = res.data[0].children;
				this.slots[4].values = res.data[0].children[0].children;
			})
		}
	}
</script>

<style lang="less">
	.add-address-contain{
		min-height: 1334/28rem;
		background-color: #f5f5f5;
		.mint-popup-bottom{
			width: 100%;
		}
		label{
			display: inline-block;
			width: 170/28rem;
		}
		input, textarea{
			width: 480/28rem;
			border: 1px solid transparent;
		}
		.sure-add-btn{
			position: fixed;
			bottom: 5%;
			width: 92%;
		}
		.start{
			align-items: flex-start;
		}
		.bottom5{
			bottom:5rem;
		}
	}
</style>